<template>
  <div>
    <!-- 头部 --state-->
    <div class="nav">
      <p>
        <span>.</span>
        新增招聘
      </p>
      <div id="nav_go4">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Return">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->

    <!-- 新增招聘 --state-->
    <div id="table_box4">
      <table width="98%;margin:0 aoto;" v-if="id==0">
        <thead>
          <tr>
            <th colspan="6">新增招聘</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>招聘部门</td>
            <td>
              <el-select v-model="department" placeholder="请选择部门" @change="changeDepart">
                <el-option
                  v-for="item in departmentvalue"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </td>
            <td>姓名</td>
            <td>
              <el-select v-model="name" placeholder="请选择姓名">
                <el-option
                  v-for="item in nameList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </td>
            <td>职位</td>
            <td>
              <el-select v-model="position" placeholder="请选择职位">
                <el-option
                  v-for="item in positionvalue"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.roleName"
                ></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>招聘人数</td>
            <td>
              <el-input v-model="amount"></el-input>
            </td>
            <td>性别要求</td>
            <td>
              <el-select v-model="sex" placeholder="请选择性别">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </td>
            <td>年龄要求</td>
            <td>
              <el-input v-model="age"></el-input>
            </td>
          </tr>
          <tr>
            <td>工作经验</td>
            <td>
              <el-input v-model="experience"></el-input>
            </td>
            <td>婚育要求</td>
            <td>
              <el-select v-model="marriage" placeholder="请选择">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </td>
            <td>教育水平</td>
            <td>
              <el-select v-model="education" placeholder="请选择学历">
                <el-option
                  v-for="item in options4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>岗位职责</td>
            <td colspan="5">
              <el-input type="textarea" :rows="8" placeholder="请输入岗位职责" v-model="duty"></el-input>
            </td>
          </tr>
          <tr>
            <td>岗位要求</td>
            <td colspan="5">
              <el-input type="textarea" :rows="8" placeholder="请输入岗位要求" v-model="requirement"></el-input>
            </td>
          </tr>
        </tbody>
      </table>
      <el-steps :active="item.currentStep" align-center class="step" v-if="id>0">
        <el-step title="发布" :description="item.createOnStr"></el-step>
        <el-step
          :title="ite.RoleName+':'+ite.state"
          :description="ite.CreateOn"
          v-for="ite in stepList"
          :key="ite.StepId"
        ></el-step>
      </el-steps>
      <table width="98%;margin:0 aoto;" v-if="id>0">
        <thead>
          <tr>
            <th colspan="6">招聘详情</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>招聘部门</td>
            <td>{{item.department}}</td>
            <td>姓名</td>
            <td>{{item.name}}</td>
            <td>职位</td>
            <td>{{item.position}}</td>
          </tr>
          <tr>
            <td>招聘人数</td>
            <td>{{item.amount}}</td>
            <td>性别要求</td>
            <td>{{item.sex}}</td>
            <td>年龄要求</td>
            <td>{{item.age}}</td>
          </tr>
          <tr>
            <td>工作经验</td>
            <td>{{item.experience}}</td>
            <td>婚育要求</td>
            <td>{{item.marriage}}</td>
            <td>教育水平</td>
            <td>{{item.education}}</td>
          </tr>
          <tr>
            <td>岗位职责</td>
            <td colspan="5">{{item.duty}}</td>
          </tr>
          <tr>
            <td>岗位要求</td>
            <td colspan="5">{{item.requirement}}</td>
          </tr>
        </tbody>
      </table>
      <table class="table" v-if="rejectList.length>0">
        <tr v-for="item in rejectList" :key="item.id">
          <td style="width:149px;font-weight:700;">驳回时间</td>
          <td style="width:150px;">{{item.Time}}</td>
          <td style="width:150px;font-weight:700;">驳回原因</td>
          <td>{{item.Main}}</td>
          <td style="width:150px;font-weight:700;">审批人</td>
          <td style="width:150px;">{{item.Name}}</td>
        </tr>
      </table>
      <!-- 表格 --end-->

      <!-- 审核 --start-->
      <div class="bottom" v-show="shows==0&&paixu==1">
        <el-button type="primary" size="medium" @click="sure(1)">确定</el-button>
        <el-button type="info" size="medium" @click="buohui">驳回</el-button>
      </div>
      <!-- 审核 --start-->
      <div class="bottom" v-show="shows==0&&paixu==2">
        <el-button type="primary" size="medium" @click="sure(1)">完成</el-button>
        <el-button type="info" @click="Return" size="medium">返回</el-button>
      </div>
      <!-- 底部 --start-->
      <div class="bottom" v-show="id==0">
        <el-button type="primary" size="medium" @click="add()">确认</el-button>
        <el-button type="info" @click="Return" size="medium">返回</el-button>
      </div>
      <!-- 底部 --end-->
      <!-- 驳回弹框 -->
      <el-dialog title="驳回" :append-to-body="true" :visible.sync="dialogVisibles" width="30%">
        <div class="color_box"></div>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="main"
        ></el-input>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="sure(2)">确定</el-button>
          <el-button size="small" type="info" @click="dialogVisibles = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 新增招聘 --end-->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data () {
    return {
      dialogVisibles: false,
      main: "",
      id: 0,
      paixu: 0,
      shows: 1,

      department: "", //招聘部门
      name: "", //姓名
      position: "", //职位
      amount: "", //招聘人数
      sex: "", //性别
      age: "", //年龄
      experience: "", //工作经验
      marriage: "", //婚育要求
      education: "", //教育水平
      duty: "", //岗位职责
      requirement: "", //岗位要求
      creater: 0,
      Mark: 0,
      departmentvalue: [],
      nameList: [],//姓名
      positionvalue: [{ label: "经理" }, { label: "专员" }],
      options2: [{ label: "男" }, { label: "女" }, { label: "不限" }],
      options3: [{ label: "不限" }, { label: "未婚" }, { label: "已婚" }, { label: "离异" }],
      options4: [
        { label: "不限" },
        { label: "初中" },
        { label: "高中" },
        { label: "中专" },
        { label: "大专" },
        { label: "本科" },
        { label: "研究生" },
        { label: "硕士" },
        { label: "博士" }
      ],
      stepList: [],
      rejectList: [],
      item: {
        department: "", //招聘部门
        name: "", //姓名
        position: "", //职位
        amount: "", //招聘人数
        sex: "", //性别
        age: "", //年龄
        experience: "", //工作经验
        marriage: "", //婚育要求
        education: "", //教育水平
        duty: "", //岗位职责
        requirement: "", //岗位要求
        currentStep: 1,
        createOnStr: ""
      }
    };
  },
  created () {
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.getbm();
    this.id = this.$route.query.e;
    this.paixu = this.$route.query.paixu;
    this.shows = this.$route.query.shows;
    if (this.id > 0) { this.getData(); };
    return
    this.getpostList();
  },
  methods: {
    sure (e) {
      if (this.Mark == 0) {
        if (e == 2) { if (this.main == "") { this.$message.error("驳回事由非空"); return } }
        var obj = { itemId: this.id, main: this.main, state: e, creater: this.creater };
        var objs = JSON.stringify(obj); let the = { index: 1, jsondata: objs };
        this.Mark = 1;
        axios.post("/apis/PersonnelMatters.asmx/Examine", the).then(({ data }) => {
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.$message.success(list.tip);
            setTimeout(() => {
              window.history.go(-1);
            }, 500);          }
          else { this.$message.error(list.tip); }
        })
      }
    },
    buohui () { this.dialogVisibles = true; },
    // 获取数据
    getData () {
      var obj = { id: this.id };
      var objs = JSON.stringify(obj);
      let the = { index: 7, jsondata: objs };
      axios.post("/apis/PersonnelMatters.asmx/GetData", the).then(({ data }) => {
        var list = JSON.parse(data.d);
        if (list == null) { this.$message.error("数据异常"); } else { this.item = list.basemess; this.stepList = list.stepList, this.rejectList = list.rejectList }
      });
    },
    Return () {
      window.history.go(-1);
    },
    //获取部门
    getbm () {
      var obj = { id: 4 };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ComApi.asmx/GetData?index=1&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.departmentvalue = list;
      });
    },
    changeDepart (e) {
      if (e != 0) {
        this.name = ""; this.nameList = []; this.position = ""; this.positionvalue = [];
        let obj = { departCode: e };
        var objs = JSON.stringify(obj);
        let the = { index: 8, jsondata: objs }
        axios.post("/apis/PersonnelMatters.asmx/GetData", the).then(({ data }) => {
          var list = eval('(' + data.d + ')');
          this.nameList = list;
        });
        //获取岗位列表
        let obj1 = { departId: e };
        var objs1 = JSON.stringify(obj1);
        let the1 = { index: 9, jsondata: objs1 }
        axios.post("/apis/PersonnelMatters.asmx/GetData", the1).then(({ data }) => {
          var list = eval('(' + data.d + ')');
          this.positionvalue = list;
        });
      }
    },
    //新增
    add () {
      if (this.Mark == 0) {
        if (this.department == "") { this.$message.error("请选择招聘部门"); return; }
        if (this.name == "") { this.$message.error("请选择招聘人"); return; }
        if (this.position == "") { this.$message.error("请选择招聘职位"); return; }
        if (this.amount == "") { this.$message.error("请设置招聘人数"); return; }
        if (this.sex == "") { this.$message.error("请选择性别"); return; }
        if (this.age == "") { this.$message.error("请设置年龄要求"); return; }
        if (this.experience == "") { this.$message.error("请填写工作经验"); return; }
        if (this.marriage == "") { this.$message.error("请设置婚育要求"); return; }
        if (this.education == "") { this.$message.error("请设置学历要求"); return; }
        if (this.duty == "") { this.$message.error("请填写岗位职责"); return; }
        if (this.requirement == "") { this.$message.error("请填写岗位要求"); return; }
        let arr = {
          department: this.department,
          name: this.name,
          position: this.position,
          amount: this.amount,
          sex: this.sex,
          age: this.age,
          experience: this.experience,
          marriage: this.marriage,
          education: this.education,
          duty: this.duty,
          requirement: this.requirement,
          type: 1,
          creater: this.creater,
        };
        var objs = JSON.stringify(arr); let the = { index: 2, jsondata: objs };
        console.log(objs)
        this.Mark = 1;
        axios.post("/apis/PersonnelMatters.asmx/Add", the).then(({ data }) => {
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.$message.success(list.tip);
            setTimeout(() => {
              window.history.go(-1);
            }, 500);          }
          else { this.$message.error(list.tip); }
        });
      }
    },
    //返回
    revert (index, index2) {
      this.$router.push({
        path: "/RecruitmentmanagementList",
        query: { index: index, index2: index2 }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.step {
  padding-top: 50px;
}
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go4 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
#table_box4 {
  width: 98%;
  height: 670px;
  background: $white;
  color: #909399;
  margin: 0 auto;
  border-radius: 10px;
  table tr td {
    height: 60px;
    width: 16.6%;
    padding: 0 2%;
    text-align: center;
    font-size: 14px;
    border: 1px solid #ebeef5;
    position: relative;
  }
  table {
    margin: 0 auto;
  }
  table tr th {
    height: 60px;
    text-align: center;
  }
  .bottom {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
<style>
#table_box4 .el-textarea__inner {
  border: none;
  outline: none;
}
#table_box4 .el-select {
  width: 100%;
}
</style>